

<style scoped lang="less">
@c-primary: #3399ff;
.weui {
  &-flex {
    &__item {
      display: flex;
    }
  }
}
.search {
  padding-top: 30px;
  &-item {
    margin-top: 1px;
    margin-bottom: 10px;
    background: white;
    padding: 10px;
    font-size: 16px;
    &__icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
      background: pink;
    }
    &__title {
      flex: 1;
    }
    &__grid {
      flex: 1;
      text-align: center;
      font-size: 14px;
      &-top {
        margin-top: 10px;
        color: #666;
      }
      &-txt {
        margin-top: 8px;
      }
    }
  }
  &-loading {
    margin-top: 0;
    margin-bottom: 0;
    height: 0;
    line-height: 0;
    color: #999;
    overflow: hidden;
    transition: all 0.5s;
    &.active {
      height: 40px;
      line-height: 40px;
    }
  }
  &-address {
    display: flex;
    color: #999;
    font-size: 12px;
    border-top: 0.1px solid #eaeaea;
    padding-top: 10px;
    margin-top: 5px;

    &__left {
      flex: 1;
    }
    &__right {
      color: peru;
    }
  }
}
.top {
  position: fixed;
  background: papayawhip;
  color: #999;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  z-index: 99;
  font-size: 14px;
  line-height: 30px;

  &-count {
    display: inline;
    color: #f00;
  }
}
</style>
<template>
  <section class="search">
    <div class="top">
      附近
      <div class="top-count">{{TotalRecords||'0'}}</div>
      家公司
    </div>

    <!-- search list -->
    <navigator v-for="(item, index) in lists" :url="'/pages/company/main?unique='+item.KeyNo" class="search-item" :key="index">
      <div class="weui-flex search-item__line">
        <div class="weui-flex__item">
          <img class="search-item__icon" :src="item.ImageUrl" alt="" srcset="">
          <span class="search-item__title" v-html="item.Name"></span>
        </div>
        <div>
          <status :status="item.ShortStatus" />
        </div>
      </div>
      <!-- grid -->
      <div class="weui-flex">
        <div class="weui-flex__item">
          <div class="search-item__grid">
            <div class="search-item__grid-top">法定代表人</div>
            <div class="search-item__grid-txt">{{item.OperName}}</div>
          </div>
        </div>
        <div class="weui-flex__item">
          <div class="search-item__grid">
            <div class="search-item__grid-top">注册资本</div>
            <div class="search-item__grid-txt">
              <money :money="item.RegistCapi"></money>
            </div>
          </div>
        </div>
        <div class="weui-flex__item">
          <div class="search-item__grid">
            <div class="search-item__grid-top">成立日期</div>
            <div class="search-item__grid-txt">{{item.StartDate}}</div>
          </div>
        </div>
      </div>
      <div class="search-address">
        <div class="search-address__left">{{item.Address||'-'}}</div>
        <div class="search-address__right">{{item.RelativeDistance||'-'}}</div>
      </div>
    </navigator>

    <!-- search on loading -->
    <load v-if="loading" />

    <!-- 无数据 -->
    <div class="info" v-else-if="lists.length===0||(lists.length!==0&&totalPage===pageIndex)">无更多数据</div>
  </section>
</template>

<script>
import Status from '@/components/status';
import Money from '@/components/money';
import Load from '@/components/load';

export default {
  components: {
    Money,
    Status,
    Load
  },
  data() {
    return {
      lists: [], // 列表数据
      TotalRecords: 0,
      totalPage: 0, // 总页数，默认为0
      pageIndex: 1 //当前页码，默认为1
    };
  },
  computed: {
    loading() {
      // 全局loading状态
      return this.$store.getters.loading;
    }
  },
  methods: {
    init() {
      // 初始化
      this.search();
    },
    async search(pageIndex = 1) {
      if (typeof pageIndex !== 'number') {
        pageIndex = 1;
      }
      if (pageIndex === 1) {
        this.lists = [];
      }

      // 查询
      const url = '/xcx/getNearbyCompany';
      let searchKey = '';
      try {
        searchKey = this.$root.$mp.page.options.Unique;
      } catch (error) {}

      const params = {
        searchKey,
        pageIndex
      };
      const { status, message, result } = await this.$http.get(url, params);
      if (status !== 200) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      //更新数据
      if (pageIndex === 1) {
        this.lists = result.Result;
      } else {
        this.lists = [...this.lists, ...result.Result];
      }

      //更新分页信息
      try {
        this.pageIndex = pageIndex;
        const page = result.Paging.TotalRecords / result.Paging.PageSize;
        this.totalPage = Math.ceil(page);
        this.TotalRecords = result.Paging.TotalRecords;
      } catch (error) {
        this.totalPage = 0;
      }
    }
  },
  onLoad() {
    // 页面挂载初始化
    this.init();
  },
  onUnload() {
    // 清除数据缓存
    this.lists = [];
  },
  onReachBottom() {
    // 上拉加载
    if (!this.loading && this.pageIndex < this.totalPage) {
      this.search(this.pageIndex + 1);
    }
  }
};
</script>